$(function(){
    $("#btn1").click(function (){
        $(".tts").css({display: 'block',opacity:'1',zIndex:'6'});
        $(".tts #myform").html("<table class=\"ttb\">\n" +
            "           <tr>\n" +
            "             <td><div>访客姓名：<input type=\"text\" name=\"vname\" class=\"vname\"></div></td>\n" +
            "             <td><div>访客手机号：<input type=\"text\" name=\"vtel\" class=\"vtel\"/></div></td>\n" +
            "\n" +
            "           </tr>\n" +
            "          <tr>\n" +
            "            <td><div>创建时间：<input type=\"date\" name=\"vtime\"/></div></td>\n" +
            "            <td><div>咨询类容：<input type=\"text\" name=\"vconsult\" class=\"vconsult\"/></div></td>\n" +
            "          </tr>\n" +
            "          <tr>\n" +
            "            <td><input type=\"button\" value=\"提交\" onclick='consult(this)'/></td>\n" +
            "            <td><input type=\"button\" value=\"取消\" onclick=\"cancelData()\"/></td>\n" +
            "          </tr>\n" +
            "        </table>");
        $(".mask").css({display:'block'});
    });
    $("#btn2").click(function (){
        $(".tts").css({display: 'block',opacity:'1',zIndex:'6'});
        $(".tts #myform").html("<table class=\"ttb\">\n" +
            "           <tr>\n" +
            "             <td><div>访客姓名：<input type=\"text\" name=\"vname\" class=\"vname\"></div></td>\n" +
            "             <td><div>访客手机号：<input type=\"text\" name=\"vtel\" class=\"vtel\"/></div></td>\n" +
            "\n" +
            "           </tr>\n" +
            "          <tr>\n" +
            "            <td><div>创建时间：<input type=\"date\" name=\"vtime\"/></div></td>\n" +
            "            <td><div>预约备注：<input type=\"text\" name=\"vmask\" class=\"vmask\"/></div></td>\n" +
            "          </tr>\n" +
            "          <tr>\n" +
            "            <td><input type=\"button\" value=\"提交\" onclick='addMask(this)'/></td>\n" +
            "            <td><input type=\"button\" value=\"取消\" onclick=\"cancelData()\"/></td>\n" +
            "          </tr>\n" +
            "        </table>");
        $(".mask").css({display:'block'});
    });
})
function cancelData() {
    //更新数据的框关闭
    $(".tts").css({display: 'none'});
    //蒙版消失
    $(".mask").css({display: 'none'});
};
function update1(obj){
    var vid = $(obj).parent().siblings().eq(0).text();
    $(".tts").css({display: 'block',opacity:'1',zIndex:'6'});
    $(".tts #myform").html("<table class=\"ttb\">\n" +
        "           <tr>\n" +
        "              <td><div>编号：<input type=\"text\" name=\"vid\" value='"+vid+"'/></div></td>\n"+
        "             <td><div>访客姓名：<input type=\"text\" name=\"vname\" class=\"vname\"></div></td>\n" +
        "             <td><div>访客手机号：<input type=\"text\" name=\"vtel\" class=\"vtel\"/></div></td>\n" +
        "\n" +
        "           </tr>\n" +
        "          <tr>\n" +
        "            <td><div>创建时间：<input type=\"date\" name=\"vtime\"/></div></td>\n" +
        "            <td><div>咨询类容：<input type=\"text\" name=\"vconsult\" class=\"vconsult\"/></div></td>\n" +
        "          </tr>\n" +
        "          <tr>\n" +
        "            <td><input type=\"button\" value=\"提交\" onclick='updateConsult(this)'/></td>\n" +
        "            <td><input type=\"button\" value=\"取消\" onclick=\"cancelData()\"/></td>\n" +
        "          </tr>\n" +
        "        </table>");
    $(".mask").css({display:'block'});
}
function update2(obj){
    var vid = $(obj).parent().siblings().eq(0).text();
    $(".tts").css({display: 'block',opacity:'1',zIndex:'6'});
    $(".tts #myform").html("<table class=\"ttb\">\n" +
        "           <tr>\n" +
        "              <td><div>编号：<input type=\"text\" name=\"vid\" value='"+vid+"'/></div></td>\n"+
        "             <td><div>访客姓名：<input type=\"text\" name=\"vname\" class=\"vname\"></div></td>\n" +
        "             <td><div>访客手机号：<input type=\"text\" name=\"vtel\" class=\"vtel\"/></div></td>\n" +
        "\n" +
        "           </tr>\n" +
        "          <tr>\n" +
        "            <td><div>创建时间：<input type=\"date\" name=\"vtime\"/></div></td>\n" +
        "            <td><div>备注：<input type=\"text\" name=\"vconsult\" class=\"vconsult\"/></div></td>\n" +
        "          </tr>\n" +
        "          <tr>\n" +
        "            <td><input type=\"button\" value=\"提交\" onclick='updateMask(this)'/></td>\n" +
        "            <td><input type=\"button\" value=\"取消\" onclick=\"cancelData()\"/></td>\n" +
        "          </tr>\n" +
        "        </table>");
    $(".mask").css({display:'block'});
}
function consult(obj){
    $("#myform").attr("action","../vistor/addConsult");
    $("#myform").submit();
    window.location.reload();
    cancelData();
}
function updateConsult(obj){
    $("#myform").attr("action","../vistor/updateConsult");
    $("#myform").submit();
    window.location.reload();
    cancelData();
}
function updateMask(obj){
    $("#myform").attr("action","../vistor/updateMask");
    $("#myform").submit();
    window.location.reload();
    cancelData();
}
function del1(obj){
    alert("确定要删除吗？")
    var vid = $(obj).parent().siblings().eq(0).text();
    $.post("../vistor/del1",{"vid":vid},rs => {
        alert("删除成功")
        window.location.reload();
    });
}
function del2(obj){
    alert("确定要删除吗？")
    var vid = $(obj).parent().siblings().eq(0).text();
    $.post("../vistor/del2",{"vid":vid},rs => {
        alert("删除成功")
        window.location.reload();
    });
}
function addMask(obj){
    $("#myform").attr("action","../vistor/addMask");
    $("#myform").submit();
    window.location.reload();
    cancelData();
}
//设置码，由于是第一次，就设为1，后面根据情况，代码自动修改
var pageNum1 = 1;
var pageNum2 = 1;
//每页显示数量
var rows = 2;
//点击页码是，会去重新查找数据
function showToPage(obj,type) {
    $(obj).addClass('current').siblings().removeClass('current');
    console.log("oj:"+$(obj).text());
    var startNum = ($(obj).text() - 1) * rows;
    console.log("startNum:"+startNum);
    console.log("type"+type);
    if (type == 1){
        axios.post("../vistor/showToPage1", qs.stringify({"startNum": startNum, "rows": rows})).then(rs => {
            if (rs.status == 200) {
                if (rs.data.code == 200) {
                    app.$data.vistors1 = rs.data.data;
                }
            }
        });
    }
    else if (type == 2){
        axios.post("../vistor/showToPage2", qs.stringify({"startNum": startNum, "rows": rows})).then(rs => {
            if (rs.status == 200) {
                if (rs.data.code == 200) {
                    app.$data.vistors2 = rs.data.data;
                }
            }
        });
    }

}
let app = new Vue({
   el:"#app",
   data:{
       vistors1:{},
       vistors2:{},
       total1:0,
       total2:0
   },
   mounted:function(){
       this.findAllConsult();
       this.findAllMarks();
   },
   methods:{
       findAllConsult:function(){
           var startNum1 = (pageNum1 - 1) * rows;
           console.log("hh:"+startNum1);
           axios.post("../vistor/findAllConsult",qs.stringify({"startNum":startNum1,"rows":rows})).then(rs => {
               console.log("vis1:"+rs);
               if (rs.status == 200){
                    if (rs.data.code == 200){
                        this.vistors1 = rs.data.data;
                        console.log("vis1"+this.vistors1);
                        this.findTotal1();
                    }
                }
           });
       },
       findAllMarks:function(){
           var startNum2 = (pageNum2 - 1) * rows;
           axios.post("../vistor/findAllMarks",qs.stringify({"startNum":startNum2,"rows":rows})).then(rs => {
               if (rs.status == 200){
                   if (rs.data.code == 200){
                       this.vistors2 = rs.data.data;
                       console.log("vis2"+this.vistors2);
                       this.findTotal2();
                   }
               }
           });
       },
       findTotal1:function (){
           axios.get("../vistor/findTotal1").then(rs => {
               if (rs.status == 200){
                   if (rs.data.code == 200){
                       this.total1 = rs.data.data;
                       $("#pagination1").showPage((Math.ceil(this.total1 / rows) || 1),1);
                   }
               }
           });
       },
       findTotal2:function (){
           axios.get("/vistor/findTotal2").then(rs => {
               if (rs.status == 200){
                   if (rs.data.code == 200){
                       this.total2 = rs.data.data;
                       $("#pagination2").showPage((Math.ceil(this.total2 / rows) || 1),2);
                   }
               }
           });
       }
   }
});
$.fn.showPage = function(count,type) {
    var str = '<li><a href="javascript:void(0)"  onclick="showToPage(this,'+type+')">1</a></li>';
    for (var i = 2; i <= count; i ++) {
        str += '<li><a href="javascript:void(0)" onclick="showToPage(this,'+type+')">' + i + '</a></li>';
    }

    var currentObj = $(this);
    currentObj.html("").append($(str));
}
